<template>
  <div>
    车辆管理
    <div style="margin: 8px 0; display: flex;">
      <a-input-search
        placeholder="请输入车牌号"
        enter-button="搜 索"
        size="large"
        @search="onSearch"
        style="width: 500px;margin-right: 50px;"
      />
      <!--      <a-button-->
      <!--        type="primary"-->
      <!--        @click="handleAdd"-->
      <!--        style="width: 100px;height: 40px;"-->
      <!--        :disabled="disableFlag"-->
      <!--      >-->
      <!--        添加车辆-->
      <!--      </a-button>-->
      <a-button
        type="primary"
        @click="showAddDialog"
        style="width: 100px;height: 40px;"
        :disabled="disableFlag"
      >
        添加车辆
      </a-button>
    </div>
    <a-table
      :columns="columns"
      :data-source="data"
      bordered
      style="width: 800px"
    >
      <template
        v-for="col in ['type', 'number', 'color']"
        :slot="col"
        slot-scope="text, record"
      >
        <div :key="col">
          <a-input
            type="text"
            :value="text"
            v-if="record.modifyFlag"
            @change="handleChange($event, col, record)"
          />
          <div v-else>{{ text }}</div>
        </div>
      </template>

      <template slot="operation" slot-scope="record">
        <div
          style="display: flex; justify-content: space-between;width: 150px"
          v-if="!record.modifyFlag"
        >
          <a-button
            :disabled="disableFlag"
            type="primary"
            @click="modify(record)"
          >
            修改
          </a-button>

          <a-button
            :disabled="disableFlag"
            type="danger"
            @click="remove(record)"
          >
            删除
          </a-button>
        </div>

        <div
          style="display: flex; justify-content: space-between;width: 150px"
          v-else
        >
          <a-button
            type="primary"
            v-if="record.addFlag"
            @click="addRecord(record)"
          >
            添加
          </a-button>
          <a-button type="primary" @click="save(record)" v-else>
            保存
          </a-button>
          <a-button type="danger" v-if="record.addFlag" @click="recover">
            取消
          </a-button>
          <a-button type="danger" @click="recover" v-else>
            重置
          </a-button>
        </div>
      </template>
    </a-table>

    <a-modal
      v-model="visible"
      title="Title"
      on-ok="handleOk"
      :maskClosable="false"
    >
      <template slot="footer">
        <a-button key="back" @click="handleCancel">
          取消
        </a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="handleOk"
        >
          提交
        </a-button>
      </template>
      <table width="450" align="center" border="0">
        <tr>
          <td>车型:</td>
          <td>
            <a-input type="text" v-model="type" />
          </td>
        </tr>
        <tr>
          <td>车牌号:</td>
          <td>
            <a-input type="text" v-model="number" />
          </td>
        </tr>
        <tr>
          <td>颜色:</td>
          <td>
            <a-input type="text" v-model="color" />
          </td>
        </tr>
      </table>
    </a-modal>
  </div>
</template>

<script>
import { SYS_GET_CAR_INFO, httpGet } from "../../api/api";
let key = require("./help");

//展示车辆信息列表(车辆信息信息包括：车型，车牌号，车辆颜色)，页面功能包括新增车辆，修改车辆信息，删除车辆，根据条件(车型，车牌号，车辆颜色)查询车辆信息
const columns = [
  {
    title: "车型",
    dataIndex: "type",
    width: "15%",
    scopedSlots: { customRender: "type" }
  },
  {
    title: "车牌号",
    dataIndex: "number",
    width: "20%",
    scopedSlots: { customRender: "number" }
  },
  {
    title: "颜色",
    dataIndex: "color",
    width: "20%",
    scopedSlots: { customRender: "color" }
  },
  {
    title: "操作",
    scopedSlots: { customRender: "operation" }
  }
];
export default {
  name: "CarManager",
  data() {
    return {
      disableFlag: false,
      columns: columns,
      data: [],
      visible: false,
      loading: false,
      type: "",
      number: "",
      color: ""
    };
  },
  methods: {
    async onSearch(value) {
      const data = await httpGet(
        SYS_GET_CAR_INFO + "?action=search&info=" + value,
        null
      );
      this.data = data;
    },
    async getCarInfo() {
      const data = await httpGet(SYS_GET_CAR_INFO + "?action=get", null);
      this.data = data;
      console.log(data);
    },
    handleAdd() {
      this.disableFlag = true;
      ++key;
      const newRecord = {
        key: key,
        type: "",
        number: "",
        color: "",
        addFlag: true,
        modifyFlag: true,
        disableFlag: false
      };
      this.data.push(newRecord);
    },
    modify(record) {
      record.modifyFlag = true;
      this.disableFlag = true;
      const data = [...this.data];
      this.data = data;
    },
    async save(record) {
      this.disableFlag = false;
      record.modifyFlag = false;
      await httpGet(
        SYS_GET_CAR_INFO + "?action=save&info=" + JSON.stringify(record),
        null
      );
      this.getCarInfo();
    },
    handleChange(e, col, record) {
      record[col] = e.target.value;
    },
    recover() {
      this.disableFlag = false;
      this.getCarInfo();
    },
    async remove(record) {
      await httpGet(
        SYS_GET_CAR_INFO + "?action=remove&info=" + JSON.stringify(record),
        null
      );
      this.getCarInfo();
    },
    async addRecord(record) {
      record.addFlag = false;
      record.modifyFlag = false;
      this.disableFlag = false;
      await httpGet(
        SYS_GET_CAR_INFO + "?action=add&info=" + JSON.stringify(record),
        null
      );
      this.getCarInfo();
    },

    handleCancel() {
      this.visible = false;
    },
    async handleOk() {
      this.loading = true;
      console.log(this.color, this.number, this.type);
      ++key;
      const record = {
        key: key,
        type: this.type,
        number: this.number,
        color: this.color
      };
      await this.addRecord(record);
      this.loading=false;
      this.visible=false;
    },
    showAddDialog() {
      this.visible = true;
    }
  },
  created() {
    this.getCarInfo();
  }
};
</script>

<style scoped>
/deep/.ant-btn-lg {
  width: 80px !important;
}

td {
  text-align: right;
  padding: 4px 0;
}

tr td:first-child {
  width: 80px;
  font-weight: bold;
  font-size: 16px;
}

tr td:nth-child(2) {
  padding-left: 20px;
}
</style>
